<template>
  <el-table :cell-style="{ textAlign: 'center' }" :data="pageInfo.list" :header-cell-style="{ 'text-align': 'center' }" border
            style="font-size: 11px;">
    <el-table-column label="订单编号" prop="id"/>
    <el-table-column label="订单状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status == 0" type="primary">未支付</el-tag>
        <el-tag v-if="scope.row.status == 1" type="warning">已支付</el-tag>
        <el-tag v-if="scope.row.status == 2" type="success">已发货</el-tag>
        <el-tag v-if="scope.row.status == 3" type="primary">已收货</el-tag>
        <el-tag v-if="scope.row.status == 4" type="success">退货退款</el-tag>
        <el-tag v-if="scope.row.status == 5" type="success">退换货</el-tag>
        <el-tag v-if="scope.row.status == 6" type="success">仅退款</el-tag>
        <el-tag v-if="scope.row.status == 7" type="success">售后</el-tag>
        <el-tag v-if="scope.row.status == 8" type="success">其他</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="用户名" prop="user.username"/>
    <el-table-column label="创建时间" prop="createTime"/>
    <el-table-column label="快递单号">
      <template #default="scope">
        <el-tag v-if="scope.row.express==null" type="primary">非快递</el-tag>
        <el-text v-else>{{ scope.row.express }}</el-text>
      </template>
    </el-table-column>
    <el-table-column label="支付方式" prop="payType">
      <template #default="scope">
        <el-tag v-if="scope.row.payType == 0" type="primary">余额宝</el-tag>
        <el-tag v-if="scope.row.payType == 1" type="warning">支付宝</el-tag>
        <el-tag v-if="scope.row.payType == 2" type="success">微信</el-tag>
        <el-tag v-if="scope.row.payType == 3" type="primary">银联</el-tag>
        <el-tag v-if="scope.row.payType == 4" type="success">其他</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="省份" prop="addr.province"/>
    <el-table-column label="市" prop="addr.city"/>
    <el-table-column label="县" prop="addr.district"/>
    <el-table-column label="乡、镇、街道" prop="addr.street"/>
    <el-table-column label="详细地址" prop="addr.address"/>
    <el-table-column label="操作" width="200px">
      <template #default="scope">
        <div style="float: right">
          <el-button v-if="scope.row.status == 0" size="small" type="success" @click="toPay(scope.row.id)">
            去支付
          </el-button>
          <el-button v-else-if="scope.row.status == 2" size="small" type="success" @click="harvest(scope.row.id)">
            确认收货
          </el-button>
          <el-button v-else size="small" type="success">售后服务</el-button>
        </div>
        <el-popover :width="550" placement="right" style="display: flex; align-items: center" trigger="hover">
          <template #reference>
            <el-button size="small" type="success" @click="table = true" @mouseenter="selectById(scope.row.id)">
              查看商品
            </el-button>
            on
          </template>
          <el-table :data="orderList" style="max-height: 400px; overflow: auto;">
            <el-table-column label="商品名称" property="goods.name" width="150"/>
            <el-table-column label="购买数量" property="count" width="100"/>
            <el-table-column label="商品价格" property="goods.price" width="100"/>
            <el-table-column label="商品版本" property="goods.version" width="100"/>
          </el-table>
        </el-popover>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination v-model:current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total" background
                 layout="prev, pager, next"
                 style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                 @change="selectByPage"/>

  <el-drawer
      v-model="table"
      :title="drawerTitle"

      direction="btt"
      size="50%"
  >
    <el-table :data="orderList">
      <el-table-column label="商品图片">
        <template #default="scope">
          <el-popover v-if="scope.row.goods.picList.length>0" placement="right" trigger="hover">
            <template #reference>
              <el-image :fit="fit" :src="server + '/goods/pic/' +scope.row.goods.picList[0].url"
                        style="width: 30px;height: 30px" @mouseenter="console.log(server + '/goods/pic/' +scope.row.goods.picList[0].url)"/>
            </template>
            <el-image v-for="(pic,index) in scope.row.goods.picList" :key="index" :fit="fit"
                      :headers="headers" :src="server + '/goods/pic/' + pic.url"
                      style="width: 30px;height: 30px ;margin-right: 11px"/>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" property="goods.name"/>
      <el-table-column label="购买数量" property="count"/>
      <el-table-column label="剩余数量" property="goods.count"/>
      <el-table-column label="商品颜色" property="goods.color"/>
      <el-table-column label="商品描述" property="goods.dscp"/>
      <el-table-column label="商品价格" property="goods.price"/>
      <el-table-column label="商品版本" property="goods.version"/>
      <el-table-column label="商品总价">
        <template #default="{ row }">
          {{ totalPrice(row) }}
        </template>
      </el-table-column>
    </el-table>
    <div>
      <span style="color: #ff4949;">总价合计: {{ allTotalPrice }}</span>
    </div>
  </el-drawer>
</template>


<script setup>

import orderApi from "@/api/orderApi.js";
import {computed, ref} from "vue";
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const router = useRouter();
const server = ref(import.meta.env.VITE_SERVER_ADDR)
const table = ref(false);
const tokenStore = useTokenStore();
const headers = computed(() => {
  let token = tokenStore.tokenStr;
  return {token}
})
//该商品总价
const totalPrice = (row) => {
  return (row.count * row.goods.price).toFixed(2); // 保留两位小数
};
//总价
const allTotalPrice = computed(() => {
  return orderList.value.reduce((total, item) => {
    return total + (item.count * item.goods.price);
  }, 0).toFixed(2); // 保留两位小数
});
//分页
const pageInfo = ref({
  pageSize: 0,
  pages: 0,
  pageNum: 0
});
//搜索条件
const condition = ref({
  id: null,
  userId: null,
  addrId: null,
  payType: null,
  status: null
})

function toPay(id) {
  router.push({
    path: '/user/pay',
    query: {
      orderId: id
    }
  });
}
function selectByPage(pageNum) {
  orderApi.selectByUserId(pageNum, 5)
      .then(resp => {
        pageInfo.value = resp.data;
      })
}

selectByPage(1);

const orderList = ref([])
const drawerTitle = ref(''); // 抽屉标题
function selectById(id) {
  orderApi.selectById(id)
      .then(resp => {
        orderList.value = resp.data.orderDetailList;
        drawerTitle.value = `订单编号: ${resp.data.id}`
      })
}

function harvest(id) {
  const order = ref({
    id: id
  })
  orderApi.harvest(order.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
        } else {
          ElMessage.error(resp.msg)
        }
      })
  selectByPage(1);
}
</script>


<style scoped>

</style>